<template>
  <div class="ping-nav">
     <div class="shopping">
       商品评价
     </div>
     <div class="zhiliang">
       <ul>
           <li>
             质量
             <van-rate v-model="value1" />
             <!-- <span class="iconfont icon-shoucang"></span>
             <span class="iconfont icon-shoucang"></span>
             <span class="iconfont icon-shoucang"></span>
             <span class="iconfont icon-shoucang"></span>
             <span class="iconfont icon-shoucang"></span> -->
             </li>
           <li>
             颜值
             <van-rate v-model="value2" />
              <!-- <span class="iconfont icon-shoucang"></span>
              <span class="iconfont icon-shoucang"></span>
              <span class="iconfont icon-shoucang"></span>
              <span class="iconfont icon-shoucang"></span>
              <span class="iconfont icon-shoucang"></span> -->
           </li>
           <li>
             脚感
             <van-rate v-model="value3" />
              <!-- <span class="iconfont icon-shoucang"></span>
              <span class="iconfont icon-shoucang"></span>
              <span class="iconfont icon-shoucang"></span>
              <span class="iconfont icon-shoucang"></span>
              <span class="iconfont icon-shoucang"></span> -->
             </li>  
       </ul>
     </div>
  </div>
</template>

<script>
export default {
name:"PingNav",
data(){
  return{
    value1: 4,
    value2: 4,
    value3: 4,
  }
}
}
</script>

<style scoped>
@import url(../../../assets/cao-iconfont/iconfont.css);
.ping-nav{
    height: 1.5rem;
    border-bottom: 7px solid #f3f2f6;
}
.shopping{
     margin-top: .2rem;
     font-size: 16px;
    font-weight: bold;
    margin-left: .2rem;
}
.zhiliang ul{
    margin-top: .1rem;
    margin-left: .2rem;
}
.zhiliang ul li{
    margin-top: .1rem;
}
.zhiliang ul li span{
    color: #00bec3;
    margin-left: .1rem;
}
.zhiliang ul li span:last-child{
    color: #cbf3f9;
    margin-left: .1rem;
}

</style>